<template>
	<form class="form-box" @change="formChange()">
	  <div class="create-insight common-content-style">
	  	<h3>洞察发布</h3>
	  	<p>
				<span><span>*</span>标题</span>
				<span style="width: 850px;" :title="article.articleTitle">
					<input class="input" v-model="article.articleTitle" name="articleTitle" required style="width: 600px;"/>
				</span>
	  	</p>
			
			<p>
				<span><span>*</span>文本</span>
				<span :class="articleContent?'hide-input':'error'">请输入正文</span>
			</p>
	   
	    <div class="editor-container">
	      <UE :defaultMsg=defaultMsg :config=config ref="ue"></UE>
	    </div>
	    <p class="btn">
	    	<input type="submit"  class="Public-btn" value="保存" @click="type('1')" v-if="currentType!='lookOver'">
	    	<input type="submit"  class="Public-btn" value="发布" @click="type('2')" v-if="currentType!='lookOver'">
	    	<input class="Public-btn" value="返回" @click="type('3')" v-if="currentType=='lookOver'">
	    </p> 
	  </div>
	</form>
</template>
<script>
	import UE from "../shareComponent/UE";
	export default {
    name:'create-insight',
    data: function(){
      return{
        defaultMsg: "",
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350
        },
         /*显示数据*/
        article:{
        	type:"14",
        	/*标题*/
        	articleTitle:"",
        	/*正文*/
        	articleContent:"",
        },
         /*富文本是否有值*/
        articleContent:"true"
      }
    },
    components:{UE},
    mounted:function() {
	  	var  _this= this;
      $.validator.setDefaults({
        submitHandler: function() {
        	/**校验成功后通常调接口**/
        	_this.submitBtn();
        }
      });
			/**校验规则**/
      this.validator = $(".form-box").validate({
        rules:{
          articleTitle:{
            required:true,
            maxlength: 100
          },
        },
        messages:{
          articleTitle:{
            required:"请输入标题"
          },
        }
      });
      /*当前页面是新增，修改，查看页面*/
      this.currentType=this.$route.query.currentType;
      /*获取回显数据*/
     if(this.$route.query.currentType=="modify"||this.$route.query.currentType=="lookOver"){
     	this.queryAllData();
     }
    },
    methods:{
    	/*获取回显数据*/
    	queryAllData:function(){
    		this.$post(
          '/article/queryArticle',
          {
	          id:this.$route.query.id,
          }
        )
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
          		var allArticle = response.resultData.articleList[0];
	            this.article={
			        	type:"14",
			        	/*标题*/
			        	articleTitle:allArticle.title,
			        	/*正文*/
			        	articleContent:allArticle.content,
			        	id:allArticle.id
			        }
	            this.defaultMsg=allArticle.content;
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
    	},
    	type:function(type){
    		if(type==3) {
          this.$router.push({path: '/main/insight'});
        }
    		this.status=type;
    	},
    	/*表单是否被改变*/
    	formChange:function(){
    		this.articleChange=true;
    	},
    	 /*保存或者发布文件*/
      submitBtn:function(){
      	this.article.articleContent=this.$refs.ue.getUEContent();
      	this.articleContent=this.article.articleContent;
      	this.article.status=this.status;
      	if(!this.articleContent){
      		return;
      	}
      	if(this.currentType=="add"){
        	this.addArticle();
        }else{
        	this.updateArticle();
        }
      },
      addArticle:function(){
      	this.$post('/article/addArticle',this.article)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
          		this.$router.push({path: '/main/insight'});
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
      },
      updateArticle:function(){
      	this.$post('/article/updateArticle',this.article)
    		.then(response => {
    			/*未登录重定向*/
          if(response==444){
          	this.$router.push({path: '/login'});
          }else{
          	if (response.resultCode ==0) {
          		this.$router.push({path: '/main/insight'});
	          }else{
	          	layer.alert(response.resultMsg);
	          }
          }
         
        }).catch(err => {
          console.log(err);
        })
      },
    }
	}
</script>
<style lang="less" scoped>
	.create-insight{
		>p,div{
			> img{
				width: 150px;
			}
			>span{
				width: 80px;
			}
			>span.btn{
				line-height: 36px;
				text-align: center;
			}
			.input,.select{
				width: 200px;
				margin-right: 20px;
			}
		}
		>p.btn{
			>input{
				width: 70px;
				text-align: center;
			}
		}
	}
</style>
